<template>
  <section @click="clickCurrent('current')" @mousedown="clickCurrent('dragging')">
    <div :class="['custorm--modelbox', 'graphicswiper-show', (custormCurrent == custormIndex)?'drag active':'drag']">
      <div v-if="custormItemData.params.isshow == '2'" class="noshow" v-bind:style="{'background-image':`url(${getPath('noshow.png')})`}"></div>
      <div style="overflow: hidden;">
        <div :class="['es-banner',`${custormItemData.style.borderstyle == '1'?'round':custormItemData.style.borderstyle == '2'?'arc':custormItemData.style.borderstyle == '3'?'square':'arc2'}`]">
          <img :src="getPath(custormItemData.data[0]['thumb']['file_path'])">
          <div class="dots" v-bind:style="{'text-align': `${custormItemData.style.align == '1'?'left':custormItemData.style.align == '2'?'center':'right'}`}">
            <span v-for="(item, index) in custormItemData.data" :key="index" v-if="custormItemData.style.borderstyle != '4'" :class="{active:(index == 0)}"></span>
            <span v-if="custormItemData.style.borderstyle == '4'" class="arc2">1/{{custormItemData.data.length}}</span>
          </div>
        </div>
      </div>
      <div class="btn-edit-del" @click="delCurrent"><span class="btn-del iconfont icon icon-close"></span></div>
    </div>
  </section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.custorm--modelbox.graphicswiper-show {
  .es-banner {
    width: 100%;
    height: 100%;
  }
  .es-banner img {
    width: 100%;
    height: 100%;
  }
  .es-banner .dots {
    height: 14px;
    padding: 0 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
  }
  .es-banner .dots span.active {
    background: #fff;
  }
  .es-banner .dots span {
    display: inline-block;
    height: 6px;
    width: 6px;
    border-radius: 10px;
    background: #ccc;
    margin: 0 4px;
  }

  .es-banner.arc .dots span.active {
    height: 6px;
    width: 14px;
    border-radius: 6px;
  }
  .es-banner.square .dots span {
    display: inline-block;
    height: 3px;
    width: 16px;
    border-radius: 0;
  }
  .es-banner .dots span.arc2 {
    width: auto;
    height: 14px;
    line-height: 15px;
    color: #fff;
    padding: 0 4px;
  }
}
</style>
